<script setup lang="ts" name="userBottomLeft">
// 获取数据
import useBottomLeft from '@/components/userinfo/hooks/userBottomLeft'
import type { ColumnsInfo, MyArticle } from '@/types/loginType'
const { EditArticlesData, ColumnList, ResultNull } = useBottomLeft()

defineProps<{
  columns: ColumnsInfo[]
  articles: MyArticle[]
}>()
</script>

<template>
  <div class="title">
    <b>专栏</b>
    <div>
      <component :is="columns.length !== 0 ? ColumnList : ResultNull" :columns="columns" />
    </div>
  </div>
  <hr />
  <div class="title">
    <b>发布的文章</b>
    <div>
      <component
        :is="articles.length !== 0 ? EditArticlesData : ResultNull"
        :articles="articles"
      ></component>
    </div>
  </div>
</template>

<style scoped lang="less">
hr {
  opacity: 0.5;
  width: 80%;
  margin: 10px auto;
  border-color: var(--color2);
}
b {
  display: block;
  margin: 4px 0;
  text-align: center;
  color: var(--color2);
}
.el-pagination {
  width: 200px;
  margin: 10px auto;
}
.title > div {
  padding: 0 20px;
  min-height: 200px;
}
</style>
